<!-- 导航栏 -->
<template>
	<view class="tabs-placeholder">
		<view class="tabs" :style="{'top': navbarHeight}">
			<view class="tabs-item" v-for="(item, index) in tabs" :key="item.value"
				:class="[{'active': item.value === tabsValue}, 'tabs-item-' + index]"
				@click="handleChangeTab(item, index)">
				{{item.label}}
			</view>
			<view class="swiper" :style="{'left': swiperLeft}"></view>
		</view>
	</view>
</template>

<script setup>
	import { ref, onMounted, getCurrentInstance, nextTick } from 'vue';

	const tabsValue = ref('-1');
	const tabs = [
		{ value: '-1', label: '回复' },
		{ value: '0', label: '咨询' },
	];

	// 导航栏高度
	const navbarHeight = function() {
		const statusBarHeight = getApp().globalData.statusBarHeight;
		const navBarHeight = getApp().globalData.navBarHeight;
		return statusBarHeight + navBarHeight + 'px';
	}();

	// 获取页面实例对象
	const instance = ref({});
	onMounted(() => {
		instance.value = getCurrentInstance()
	})

	const swiperLeft = ref('');
	const handleChangeTab = (item, index) => {
		tabsValue.value = item.value;

		nextTick(() => {
			const query = uni.createSelectorQuery().in(instance.value)
			query.select('.tabs-item-' + index).boundingClientRect((data) => {
				swiperLeft.value = data.left + data.width / 2 + 'px';
			}).exec();
		})
	}
</script>

<style lang="scss" scoped>
	.tabs-placeholder {
		height: 100rpx;
	}

	.tabs {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9;
		display: flex;
		align-items: flex-end;
		width: 100%;
		height: 100rpx;
		padding-bottom: 28rpx;
		background-color: white;
		box-sizing: border-box;

		&-item {
			font-weight: 500;
			font-size: 30rpx;
			color: #666666;
			line-height: 1;
			padding: 30rpx 30rpx 0;
			transition: font-size 0.2s;

			&.active {
				font-weight: bold;
				font-size: 34rpx;
				color: #222222;
			}
		}

		.swiper {
			position: absolute;
			bottom: 0;
			left: 60rpx;
			width: 46rpx;
			height: 9rpx;
			background: #FE3C26;
			border-radius: 5rpx;
			transform: translateX(-50%);
			transition: left 0.2s;
		}
	}
</style>